<template>
  <div>
    <div v-show="mainConState">
    <Header></Header>
    <!--actList 活动列表开始-->
    <div class=" w1200 bc mt20 mb40 ">
      <!--列表条件搜索-->
      <div class="pl20 pr20 pt30 pb30 bg100">
        <div class="selBoxItem">
            <div class="tit">类别</div>
            <div class="selectItem">
                <li class="curbg_grn hoverbg_grn" type="variety" :mark="0" @click="selectVariety">全部</li>
                <li class="hoverbg_grn" type="variety" :mark="1" @click="selectVariety">活动</li>
                <li class="hoverbg_grn" type="variety" :mark="2" @click="selectVariety">游记</li>
            </div>
        </div>
        <div class="selBoxItem">
          <div class="tit">地区</div>
          <div class="selectItem">
            <li class="curbg_grn hoverbg_grn" type="map" @click="allMap">全部</li>
            <div class="mapSelect" v-if="options.length>0">
              <wLinkage :options="options" @selectMap="selectMap"></wLinkage>
            </div>
          </div>
        </div>
        <div class="selBoxItem" v-show="(variety==1)">
          <div class="tit">活动状态</div>
          <div class="selectItem">
            <li class="curbg_grn hoverbg_grn" type="activeState" :mark="3" @click="selectVariety">全部</li>
            <li class="hoverbg_grn" type="activeState" :mark="0" @click="selectVariety">未开始</li>
            <li class="hoverbg_grn" type="activeState" :mark="1" @click="selectVariety">进行中</li>
            <li class="hoverbg_grn" type="activeState" :mark="2" @click="selectVariety">已结束</li>
          </div>
        </div>
      </div>
      <!--列表条件搜索结束-->
      <!--综合排序-->
      <div class="mt20 pl20 pr20 pt10 pb10 bg100  clearfix">
        <a class="fl h36 fm_songti f14 c20 lh36 vm mr40">排序</a>
        <a style="position: relative;top: -2px;" class="fl h36 fm_songti f14 c20 lh36 vm mr40 pointer" :mark="0" type="sort" @click="newOrHot" :class="{seleClass : sele === 'new'}"><span
          class="vm">最新 </span><img class=" vm" src="static/images/sort-arrow.png"/></a>
        <a class="fl h36 fm_songti f14 c20 lh36 pointer" :mark="1" type="sort" @click="newOrHot" :class="{seleClass : sele === 'hot'}">最热<img src="static/images/hot-btn.png"/></a>
        <a class="fr h36 fm_songti f12 c50 lh36 b87 bg97 pl10 pr10 editBtnBg hoverborder_grn ml10 pointer" @click="gotoCreateAtc"><i
          class="inline-block w20 h10 mr5"></i>发布活动</a>
        <a class="fr h36 fm_songti f12 c50 lh36 b87 bg97 pl10 pr10 editBtnBg hoverborder_grn pointer" @click="gotoCreateTra"><i
          class="inline-block w20 h10 mr5"></i>发布游记</a>
        <a @click="searchKey(keyword)" class="fr w60 h36 bg_grn_119c5b mr20 greenBgSearch pointer"></a>
        <input v-model="keyword" @keyup.enter="searchKey(keyword)" class="fr w350 h36 b87 bgfff pl20 pr20  f12 c40 lh36"
               type="text" placeholder="请输入关键字搜索"/>
      </div>
      <!--活动list-->
      <div v-if="lists.length>0">
        <div v-for="(list,i) in lists" class="ActList bc" @click="gotoDetail(list)">
          <!--游记item开始-->
          <div v-if="list.type==2" class="p20 bg100 mt20  hoverborder_orgred pointer">
            <dl class="">
              <dt class=" clearfix">
                <div class="fl h20 mr40">
                  <img class="fl mr10" :src="list.userImgUrl" width="20" height="20" style="border-radius:50%;"/>
                  <span class="fl c60 f16 fm-yahei lh20">{{list.nickName}}</span>
                </div>
                <img class="fl mr10" src="static/images/tip-icon-游记.png" width="40" height="20"/>
                <img class=" fl" v-if="(type==1&&i==0)" src="static/images/tip-icon-最热.png" width="40" height="20"/>
                <span class="fr fm f14 c70 lh20">{{list.addTime.substring(0,10)}}</span>
              </dt>
              <dd class="mt20 pr">
                <p class="f14 lh24 c20 fm-songti letter1">{{(list['activityName']!="")?list['activityName']:limitworld(list['summarize'],200,"...")}}</p>
                <img class="abs-right-bottom" src="static/images/arrow-down-10-5.png" width="10"
                            height="5"/>
              </dd>
            </dl>
            <ul class="clearfix mt20" style="height:174px;overflow: hidden;">
              <li v-if="list.journalType===1" class="fl mr10 bg92 travelItem">
                <img :src="list['coverImgUrl']+'?x-oss-process=image/resize,m_fill,h_174,w_278,limit_0'" alt="">
              </li>
              <li v-else v-for="(imglist,index_) in list.travelsresourceList"  class="fl mr10 bg92 travelItem">
                <img v-if="imglist.flag==1" :src="imglist.fileName+'?x-oss-process=image/resize,m_fill,h_174,w_278,limit_0'" />
                <img v-else-if="imglist.flag==2" :src="imglist.thumFileName+'?x-oss-process=image/resize,m_fill,h_174,w_278,limit_0'" />
                <p v-if="imglist.flag==2" class="shadow"></p>
                <img v-if="imglist.flag==2" src="static/images/play.png" alt="" class="btnPlay">
              </li>
            </ul>
          </div><!--游记item结束-->
          <!--活动item开始-->
          <div v-if="list.type==1" class="p20 bg100 mt20 clearfix  hoverborder_orgred pointer" title="活动">
          <div class="pr fl">
            <img :src="list.coverImgUrl+'?x-oss-process=image/resize,m_fill,h_404,w_616'" width="308" height="202"/>
            <div v-text="add(list.status)"
                 class="pl8 pr8 h20 bg0-alpha40 br2 c98 f12 fm-songti tc lh20 abs-left-top mt10 ml10 "></div>
          </div>
          <dl class="fl ml25 w825 lh20 f12 c40">
            <dt class="clearfix">
              <b class="fl f20 c20 fm-yahei fn">{{list.activityName}}</b>
              <img class="fl ml30" src="static/images/tip-icon-活动.png" width="40" height="20" alt="活动tipicon"/>
              <span class="locationBg fr c60 fm-songti "><i class="pl15"></i>{{list.provinceName}}&nbsp;.&nbsp;{{list.cityName}}</span>
            </dt>
            <dd class="mt30">
              <table class="w825 f12 c40 fm-songti lh20 tl vt" border="0" cellspacing="" cellpadding="">
                <tr>
                  <td class="pb5">
                    <b class="fb">活动日期：</b>
                    <span>{{list.startTime.substring(0,10)}}</span>
                    <span class="mr5 ml5">至</span>
                    <span>{{list.endTime.substring(0,10)}}</span>
                  </td>
                  <!--<td class="pb5">-->
                    <!--<b>领队：</b>-->
                    <!--<span>张阿毛</span>-->
                    <!--<span class="mr10 ml10">/</span>-->
                    <!--<span>15985623587</span>-->
                  <!--</td>-->
                </tr>
                <tr>
                  <td class="pb5">
                    <b class="fb vm">活动星级：</b>
                    <i v-for="(i,index) in 5" class="grayStar ml10" :class="{redStar:list.difficulty>index}"></i>
                  </td>
                </tr>
                <tr>
                  <td class="pb5">
                    <b>场地：</b>
                    <span v-for="item in list.activityPlaceList">{{item.placeName}}</span>
                    <!-- <span class="mr10 ml10">|</span> -->
                    <!-- <span>{{list.activityPlaceList[1].placeName}}</span> -->
                  </td>
                </tr>
              </table>
            </dd>
            <dd class="mt10 pr">
              <p class="letter1 c50">{{list.activityDescripition}}
              </p>
            </dd>
            <dd class="h28 lh28 mt25 clearfix">
              <a class="fl commentsBg c50 "><i class="pl25"></i>{{list.commentCount}}</a>
              <span class="fl ml30 c60 ">已报名<i class="fb ml5 mr5 c_orgRed_ff481d">{{list.userCount}}</i>人</span>
              <a class=" fr detailMoreBg bg_grn_119c5b c100 h28 lh28 pl15 pr15 br2 letter1 hoverbg_orgred" v-if="list.status==0">我要报名<i class="pr18"></i>
              </a>
              <a class=" fr detailMoreBg c100 h28 lh28 pl15 pr15 br2 letter1 curbg_orgred" v-if="list.status==1">进行中<i class="pr18"></i>
              </a>
              <a class=" fr detailMoreBg c100 h28 lh28 pl15 pr15 br2 letter1 curbg_orgred" v-if="list.status==2">已结束<i class="pr18"></i>
              </a>
            </dd>
          </dl>
        </div><!--活动item结束-->
         </div><!--Actlist结束-->
      </div>
      <div v-else>
        <p class="isNull">
          暂无内容
        </p>
      </div>
      <!--页码-->
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div><!--siteList结束-->
    <Footer></Footer>
    </div>
    <Loading v-show="loadState"></Loading>
    <div id="travelTypeBox" v-if="travelStatus">
      <div id="travelTypeCon">
        <div id="con">
          <p>选择编辑类型 <i @click="closeTravelType">×</i></p>
          <div class="BtnBox">
            <span @click="createTravelTxt">发布文章</span>
            <span @click="createTravelPic">发布图片/视频</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Header from '../../components/header'
  import Footer from '../../components/footer'
  import axios from '../../../config/http'
  import Loading from '../../components/loading'
  import wLinkage from '../../components/wLinkage'
  export default {
    components: {
      Header,
      Footer,
      Loading,
      wLinkage
    },
    data() {
      return {
        travelStatus:false,
        lists: [],
        idList: '',
        keyword_: '',
        keyword: '',
        total: 0,
        pageSize: 8,
        currentPage: 0,
        loadState:true,
        mainConState: false,
        variety:0,
        varietyStatus:3,
        type:0,
        options:[],
        provinceID:0,
        cityID:0,
        sele:"new"
      }
    },
    mounted() {
      this.getAxios();
      this.getProvince();
    },
    methods: {
      // 页面加载调用
      getAxios () {
        axios({
          url: '/Activity/GetList',
          method: "post",
          headers: {
            client: "pc"
          },
          data: {
            "type": this.type,
            "cityID": this.cityID,
            "provinceID": this.provinceID,
            "variety": this.variety,
            "userID": 0,
            "pageIndex": this.currentPage - 1,
            "pageSize": this.pageSize,
            "keyword": this.keyword_,
            "keywordsUserID": "",
            "keywordsCityID": "",
            "keywordsRegionID": "",
            "keywordsProvinceID": "",
            "varietyStatus": this.varietyStatus,
            "skipCount": "",
            "groupIDExtend": "",
            "clientType": "pc"
          }
        }).then(res => {
          this.lists = res.data.data;
          this.total = res.data.total;
          this.loadState = false;
          this.mainConState = true;
          let arr01 = [];
          this.idList = arr01;
          //
          for (let k of this.lists) {
            if (k.type == 1) {
              arr01.push(k.id)
            }
          }
        })
        this.add()
      },
      // 获取省份名称
      getProvince () {
        axios({
          url: '/Common/GetArea',
          method: "post",
          headers: {
            client: "pc"
          }
        }).then(res => {
          let listProvince = res.data.data['listProvince'];
          for (let i = 0, j = listProvince.length; i < j; i++) {
            let cityList = listProvince[i]['data'];
            for (let n = 0, m = cityList.length; n < m; n++) {
              delete cityList[n]['data'];
            }
          }
          this.options = listProvince;
        })
      },
      selectMap (e) {
        this.provinceID = e.province;
        this.cityID = e.city;
        this.loadState = true;
        this.getAxios();
      },
      // 改变游记与活动
      selectVariety (e) {
        this.currentPage = 1;
        let thisEle = e.target;
        let type = thisEle.getAttribute("type");
        let childEle = thisEle.parentNode.children;
        let lastCls = thisEle.getAttribute("class");
        let selectCls = lastCls + " curbg_grn";
        for (let i = 0, j = childEle.length; i < j; i++) {
          childEle[i].setAttribute("class", lastCls);
        }
        thisEle.setAttribute("class", selectCls);
        let markState = thisEle.getAttribute("mark");
        if (type == "variety") {
          this.variety = markState;
        }
        if (type == "activeState") {
          this.varietyStatus = markState;
        }
        this.loadState = true;
        this.getAxios();
      },
      // 切换最热最新
      newOrHot (e) {
        this.currentPage = 1;
        let markState = e.target.getAttribute("mark");
        this.sele = (markState == 0) ? "new" : "hot";
        this.type = markState;
        this.loadState = true;
        this.getAxios();
      },
      // 显示全部地区
      allMap (e) {
        var type = e.target.getAttribute("type");
        this.provinceID = 0;
        this.cityID = 0;
        this.loadState = true;
        this.getAxios();
      },
      // 限制显示字数
      limitworld: function (worlds, wordlength, mark) {
        var nowLength = worlds.length;
        var newWorlds = "";
        if (nowLength > wordlength) {
          newWorlds = worlds.substr(0, wordlength) + mark;
        } else {
          newWorlds = worlds;
        }
        return newWorlds;
      },
      // 判断活动状态
      add (type) {
        if (type == 0) {
          return '未开始'
        } else if (type == 1) {
          return '进行中'
        } else {
          return '已结束'
        }
      },
      // 获取领队信息
      getLeader () {
        axios({
          url: "/Activity/GetInfo",
          method: "post",
          headers: {
            client: "pc"
          }
        }).then(res => {

        })
      },
      // Enter到输入页码页面
      handleCurrentChange (val) {
        window.scrollTo(0, 0)
        this.currentPage = val
        this.loadState = true
        this.getAxios()
      },
      // 搜索对应场地信息
      searchKey () {
        this.currentPage = 1
        this.pageSize = 8
        this.keyword_ = this.keyword
        if (this.keyword_ == '') {
          this.pageSize = 8
        }
        this.getAxios()
      },
      // 跳转详情
      gotoDetail (itemInfo) {
        let type = itemInfo.type;
        let itemId = itemInfo.id;
        let path = "";
        switch (type) {
          case 1:
            path = "/activityDetail";
            break;
          case 2:
            path = "/travelDetail";
            break;
        }
        this.$router.push({
          path: path,
          query: {
            id: itemId
          }
        })
      },
      // 跳转发布活动页
      gotoCreateAtc () {
        if (localStorage.getItem('token') === "" || localStorage.getItem('token') === null || localStorage.getItem("token") === "undefined") {
          this.$message.warning("请先登录");
        } else {
          let token = localStorage.getItem("token");
          if (token === "" || token === "undefined" || token === null) {
            this.$message.warning("请先登录");
          } else {
            this.$router.push({
              path: '/activity/editAct'
            })
          }
        }
      },
      // 跳转发布游记页
      gotoCreateTra () {
        let token = localStorage.getItem("token");
        if (token === "" || token === "undefined" || token === null) {
          this.$message.warning("请先登录");
        } else {
          this.travelStatus = true;
        }
      },
      createTravelPic(){
        this.$router.push({
          path: '/travel/createTra'
        })
      },
      createTravelTxt(){
        this.$router.push({
          path: '/travel/createTraCircle'
        })
      },
      closeTravelType(){
        this.travelStatus = false;
      }
    }
  }
</script>
<style lang="less" scoped>
  td, p {
    text-align: left;
  }

  .p20 {
    border: 1px solid #fff;
  }

  .p20:hover {
    border: 1px solid #f16113;
  }

  input {
    cursor: text;
  }

  dl .redStar {
    background: url(../../../static/images/star-red.png) no-repeat center;
  }

  //重置分页样式
  .el-pager /deep/ .number {
    display: inline-block;

    line-height: 100%;
    border: 1px solid red;
  }

  .el-pagination {
    margin-top: 30px;
    text-align: right;
  }

  .el-pager > li {
    height: auto;
    padding: 10px 10px;
  }
  .typeList tr{
    height:45px;
  }
  .typeList tr td{
    padding:0px !important;
  }
  .greenBgSearch{
    border: 1px solid #119c5b;
  }
  .hoverbg_grn{
    cursor:pointer;
  }
  .selBoxItem{
    display: flex;
    display: -webkit-flex;
    font-size:14px;
    font-family: "Microsoft YaHei";
    height:30px;
    line-height:30px;
    margin-bottom:15px;
    color:#666;
  }
  .selBoxItem:last-child{
    margin:0px;
  }
  .selBoxItem .tit{
    width:65px;
    text-align: justify;
    margin-right:50px;
  }
  .selBoxItem .tit:after{
    display: inline-block ;
    content: '';
    padding-left: 100%;
  }
  .selectItem{

  }
  .selectItem li{
    float: left;
    padding:0 10px;
    margin-right:35px;
    font-size:12px;
  }
  .isNull {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    text-align: center;
  }
  .travelItem{
    position:relative;
  }
  .btnPlay{
    width:60px;
    position:absolute;
    top:50%;
    margin-top:-30px;
    left:50%;
    margin-left:-30px;
  }
  .shadow{
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    left:0px;
    background: rgba(0,0,0,0.6);
  }
  .mapSelect{
    display:inline-block;
    padding:0px 10px;
  }
  .seleClass{
    color:#F60606;
  }
  #travelTypeBox{
    position: fixed;
    top:0px;
    left:0px;
    width: 100vw;
    height:100vh;
    background: rgba(0,0,0,0.4);
  }
  #travelTypeCon{
    width:410px;
    height:200px;
    background:rgba(255,255,255,0.7);
    border-radius:4px;
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-205px;
    padding:10px;
  }
  #con{
    background:#fff;
    width:100%;
    height:100%;
  }
  #con p{
    width:100%;
    height:40px;
    line-height:40px;
    font-size:14px;
    background:#119C5B;
    color:#fff;
    text-indent:20px;
  }
  #con p i{
    width:40px;
    height:40px;
    float: right;
    display:block;
    cursor:pointer;

  }
  .BtnBox{
    display: flex;
    justify-content: space-around;
    margin-top:60px;
    font-size:14px;
  }
  #con span{
    display: inline-block;
    background:#119C5B;
    color:#fff;
    width:150px;
    text-align: center;
    line-height:40px;
    border-radius:3px;
    cursor:pointer;
  }
</style>
